<template>
  <el-dialog  :visible.sync="dialogChartsShow" top="0vh" width="90%" :modal-append-to-body="false" center>
    <div class="chart-container">
      <chart height="100%" width="100%"/>
    </div>
    <div class="chart-container2">
      <chart3 height="100%" width="100%"/>
    </div>

    <div class="chart-container2">
      <chart4 height="100%" width="100%"/>
    </div>
    <p style="clear:both;"></p>
  </el-dialog>
</template>
<script>
  import Chart from '@/pages/stockManage/Charts/mixChart'
  import Chart2 from '@/pages/stockManage/Charts/lineMarker'
  import Chart3 from '@/pages/stockManage/Charts/pieChart'
  import Chart4 from '@/pages/stockManage/Charts/radarChart'
  export default {
    name: 'chartsStkComp',
    components: {
      Chart,
      Chart3,
      Chart4,
    },
    props: {
      chartsData:Object,
      textMap:String,
    },
    mounted() {
      this.temp=this.chartsData
    },
    data:function () {
      return {
        dialogChartsShow:false,
      }
    },
    computed: {
    },
    watch:{
    },
    methods: {
    }
  }
</script>
<style scoped>
  .chart-container{
    position: relative;
    width: 100%;
    /*height: calc(100vh - 84px);*/
    height: calc(50vh);
  }
  .chart-container2{
    position: relative;
    width: 48%;
    height: calc(50vh);
    float: left;
  }
</style>
